import React, { useState } from 'react';
import { Button } from 'antd-mobile';

function StateCom(props: any) {
  // useState
  // Hook 内部使用 Object.is 来比较新/旧 state 是否相等
  //*  如果你修改状态的时候，传的状态值没有变化，则不重新渲染
  console.log('StateCom渲染了', props);
  const { data, addClick } = props;
  // 也可以用下面这种方式来声明数据，官方用的是数组解构，实际上数组解构是一件开销很大的事情
  // let _useState = useState(0);
  // let num = _useState[0];
  // let setNum = _useState[1];

  function addData() {
    addClick(data + 1);
    console.log(' num ===>', data); // 此处打印的num仍然为旧值，并不是最新值
  }

  // useState 数组
  const initList: number[] = [1, 2, 3, 4, 5];
  const [list, setList] = useState(initList);
  function addList() {
    const currentList = JSON.parse(JSON.stringify(list)); // 声明一个数组来深拷贝当前数组的值，必须用深拷贝！！！
    currentList.push(currentList.length + 1);
    setList(currentList);
    console.log('new list ===>', currentList); // currentList就是最新值
  }

  // useState 不会自动合并更新对象。你可以用函数式的 setState 结合展开运算符来达到合并更新对象的效果
  const [counter, setCounter] = useState({ name: '计数器', number: 0 });
  function addCounter() {
    console.log({ ...counter, number: counter.number + 1 });
    setCounter({ ...counter, number: counter.number + 1 });
  }
  return (
    <div>
      <Button onClick={() => addData()}>{data}</Button>
      {list.map((item: any, index: number) => {
        return <p key={index}>{item}</p>;
      })}
      <Button onClick={() => addList()}>增加list元素</Button>

      <p>
        {counter.name}:{counter.number}
      </p>
      <Button onClick={() => addCounter()}>+</Button>
    </div>
  );
}
export default StateCom;
